﻿<!DOCTYPE html>
<html>
<head>
    <title>SignalR Simple Chat</title>

    <link href="/Content/Prettify/Themes/doxy.css" rel="stylesheet">
    <script src="Scripts/Prettify/prettify.js" type="text/javascript"></script>

    <style type="text/css">
        .container {
            background-color: #C0C0C0;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>

</head>
<body>
    <div class="container">
        <h3>Example One</h3>
        <a href="http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-getting-started-with-signalr-20">http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-getting-started-with-signalr-20</a>
        <br />
        <br />
        <input type="text" value="Hello World SignalR!" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />

        <p id="debugTxt">

            <br />
            <ul id="discussion"></ul>

    </div>
    <div class="container">
        <h3>Client setup</h3>

        <a href="http://www.asp.net/signalr/overview/signalr-20/hubs-api/hubs-api-guide-javascript-client">http://www.asp.net/signalr/overview/signalr-20/hubs-api/hubs-api-guide-javascript-client</a>

        <p>
            A JavaScript client requires references to jQuery and the SignalR core JavaScript file. The jQuery version must be 1.6.4 or major later versions, such as 1.7.2, 1.8.2, or 1.9.1. If you
            decide to use the generated proxy, you also need a reference to the SignalR generated proxy JavaScript file. The following example shows what the references might look like in an HTML page
            that uses the generated proxy.
        </p>
        <pre class="prettyprint linenums">
                &lt;script src="Scripts/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
                &lt;script src="Scripts/jquery.signalR-2.0.0.min.js"&gt;&lt;/script&gt;
                &lt;script src="signalr/hubs"&gt;&lt;/script&gt;
            </pre>
    </div>

    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-1.10.2.js"></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.0.1.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>

    <!--<script type="text/javascript">

    (function (jQuery) {
    jQuery(document).ready(function () {
    prettyPrint();
    });
    }(jQuery))

    </script>-->
    <!--Add script to update the page and send messages.-->
    <script type="text/javascript">
        $(function () {

            // Declare a proxy to reference the hub.
            var chat = $.connection.chatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message.
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page.
                $('#discussion').append('<li><strong>' + encodedName
                                        + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');

                $('#debugTxt').text("Last previous message sent to server: " + message);

            };
            // Get the user name and store it to prepend to messages.
            //$('#displayname').val(prompt('Enter your name:', ''));
            $('#displayname').val("Matthew");
            // Set initial focus to message input box.
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub.
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment.
                    $('#message').val('').focus();
                });
            });

            prettyPrint();
        });


    </script>

</body>
</html>